<template>
  <a-table
    v-bind="$props"
    :columns="columns"
    :loading="tableLoading"
    :rowSelection="rowSelection"
    :rowKey="rowKey"
    bordered
    size="middle"
    :data-source="data"
    :pagination="pageOption"
    @change="paginationChange"
  >
    <template v-if="$slots.title" v-slot:title>
      <slot name="title" />
    </template>
    <template v-if="$slots.expandedRowRender" #expandedRowRender="{ record }">
      <slot name="expandedRowRender" :record="record" />
    </template>
    <template v-for="slotItem in columns.filter(item => item.slots)" v-slot:[slotItem.slots.customRender]="{ record, text }">
      <!--        非操作-->
      <div v-if="slotItem.slots.customRender !== 'action'" :key="slotItem.slots.customRender">
        <!--        格式化显示-->
        <template v-if="slotItem.slotsType == 'format'">
          {{ slotItem.slotsFunc(record[slotItem.dataIndex || slotItem.key], record) }}
        </template>
        <!--        自定义组件-->
        <template v-if="slotItem.slotsType == 'component'">
          <component :is="slotItem.slotsFunc(record)" />
        </template>
      </div>
      <!--        操作-->
      <div v-if="slotItem.slots.customRender == 'action'" :key="slotItem.slots.customRender" class="actions">
        <template v-for="(action, index) in actions">
          <template v-if="action.type == 'select'">
            <!--              下拉选择器-->
            <a-select v-model:value="record[action.key]" :key="index" size="small">
              <Option v-for="option in action.options" :value="option.value" :key="option.value">
                {{ option.label }}
              </Option>
            </a-select>
          </template>
          <!--            按钮-->
          <template v-if="action.type == 'button'">
            <a-button v-permission="{ action: action.permission, effect: 'disabled' }" v-bind="{ ...buttonProps, ...action.props }" @click="actionEvent(record, action.func)" :key="index">
              {{ action.text }}
            </a-button>
          </template>
          <!--            气泡确认框-->
          <template v-if="action.type == 'popconfirm'">
            <a-popconfirm :key="index" placement="leftTop" @confirm="actionEvent(record, action.func)">
              <template v-slot:title>
                您确定要删除吗？
              </template>
              <a-button v-bind="{ ...buttonProps, ...action.props }">
                {{ action.text }}
              </a-button>
            </a-popconfirm>
          </template>
        </template>
      </div>
    </template>
  </a-table>
</template>
<script lang="ts">
import { defineComponent, reactive, PropType, toRefs, ref } from 'vue'
import { Card, Select, Table, Popconfirm, message } from 'ant-design-vue'
import { AButton } from '@/components/button'
import { usePages } from '@/hooks'
import { permission } from '@/directives/permission'
import { any } from 'vue-types'
import moment from 'moment'

interface Columns {
  actions?: any
  [key: string]: any
}

interface Props {
  columns: Columns[]
  rowSelection: any
  rowKey: string | number
  pageOption: object
  getListFunc: (prams) => any
}
// 分页查询参数
interface PagePrams {
  limit?: string | number
  page?: string | number
  [key: string]: any
}

export default defineComponent({
  name: 'dynamic-table',
  props: {
    columns: {
      type: Object as PropType<object[]>
    },
    getListFunc: {
      type: Function
    },
    rowSelection: {
      type: Object
    },
    rowKey: {
      type: [String, Number] as PropType<string | number>
    },
    pageOption: {
      type: Object
    }
  },
  components: {
    [Table.name]: Table,
    [Card.name]: Card,
    [Select.name]: Select,
    [Popconfirm.name]: Popconfirm,
    [Select.Option.name]: Select.Option,
    AButton
  },
  directives: { permission },
  setup(props: Props) {
    const { pageOption } = usePages()
    const columns = ref<any>(props.columns)
    const state = reactive({
      data: [],
      pageOption: Object.assign(pageOption, props.pageOption),
      actions: props.columns.find(item => (item.dataIndex || item.key) == 'action')?.actions || [],
      tableLoading: false // 表格加载
    })

    // 获取表格数据
    const refreshTableData = async (
      param: PagePrams = {
        page: state.pageOption.current,
        limit: state.pageOption.pageSize,
        ...props.pageOption
      }
    ) => {
      state.tableLoading = true
      const { data, pagination } = await props.getListFunc(param).finally(() => (state.tableLoading = false))
      Object.assign(state.pageOption, pagination)
      state.data = data
      console.log(state.data, '表格数据')
    }

    refreshTableData()

    // 操作事件
    const actionEvent = (record, func) => func({ record, props }, refreshTableData)

    // 分页改变
    const paginationChange = pagination => {
      console.log(pagination)
      state.pageOption = {
        ...state.pageOption,
        ...pagination
      }
      refreshTableData({
        limit: pagination.pageSize,
        page: pagination.current,
        ...props.pageOption
      })
    }

    const buttonProps = {
      size: 'small'
    }

    return {
      ...toRefs(state),
      columns,
      buttonProps,
      actionEvent,
      refreshTableData,
      paginationChange
    }
  }
})
</script>

<style lang="scss" scoped>
::v-deep(.ant-table-title) {
  display: flex;

  .ant-btn {
    margin-right: 10px;
  }
}
.actions > * {
  margin-right: 10px;
}
</style>
